<template>
	<view class="notification-detail-list">
		<view v-for="(item,index) in list" :key="index">
			<view class="time">{{item.createTime|getPublishTime}}</view>
			<view class="notification-item">
				<view v-if="item.type==='1'" class="post" @click="goPostDetail(item.itemId)">
					<view class="post-head-box">
						<view style="position: relative">
							<u-badge v-if="item.isRead!=='1'" class="unread-count" :is-dot="true" :offset="[-20,-15]"
								type="error"></u-badge>
							<image v-if="item.image" class="cover-image" :src="imageUrl(item.image)" mode="aspectFill"></image>
						</view>
					</view>
					<view class="post-bottom-box">
						<view class="bottom-head">
							<view class="bottom-head-title">{{item.postTitle}}</view>
						</view>
						<view class="bottom-content">
							<rich-text class="content" :nodes="markdownToContent(item.postContent)"></rich-text>
						</view>
					</view>
				</view>
				<view v-else class="notification">
					<view class="notification-head-box">
						<view style="position: relative">
							<u-badge v-if="item.isRead!=='1'" class="unread-count" :is-dot="true" :offset="[-25,8]"
								type="error"></u-badge>
						</view>
						<view class="circular-box">
							<u-icon class="circular-icon" name="volume-up-fill" color="" size="24"></u-icon>
						</view>
						<view class="title">{{item.title}}</view>
					</view>
					<view class="notification-bottom-box">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		marked
	} from 'marked'
	export default {
		name: "notification-detail-list",
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {};
		},
		created() {},
		filters: {
			getPublishTime(dateString) {
				return uni.$u.timeFrom(new Date(dateString))
			},
		},
		methods: {
			goPostDetail(itemId) {
				let url;
				url = "/pages/platform/post/post-detail?id=" + itemId
				uni.navigateTo({
					url: url
				})
			},
			markdownToContent(markdown) {
				return marked(markdown)
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7F9;
	}

	.notification-detail-list {

		.time {
			margin-top: 20rpx;
			color: #999;
			text-align: center;
		}

		.notification-item {
			padding: 30rpx;
			padding-bottom: 20rpx;
			margin: 26rpx;
			background: #fff;
			border-radius: 25rpx;
			box-shadow: 0 0 10rpx rgba($color: #eaeaea, $alpha: 0.2);

			.post {
				.post-head-box {
					.cover-image {
						width: 100%;
						height: 360rpx;
						border-radius: 10rpx;
					}
				}

				.post-bottom-box {
					.bottom-head {
						margin: 8rpx 0;

						.bottom-head-title {
							color: #000;
							font-size: 16px;
							font-weight: 700;
						}
					}

					.bottom-content {
						max-height: 260rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;

						.content {
							
							color: #999;

						}
					}
				}
			}

			.notification {
				.notification-head-box {
					display: flex;

					.circular-box {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 40rpx;
						height: 40rpx;
						margin: 5rpx;
						background-color: #2979ff;
						border-radius: 50%;

						.circular-icon {
							color: #fff;
							display: flex;

						}
					}

					.title {
						margin-left: 5rpx;
						color: #000;
						font-size: 13px;
						font-weight: 700;
						line-height: 20px;
					}
				}

				.notification-bottom-box {
					margin-top: 10rpx;
					color: #565656;
				}
			}

		}

	}
</style>